<template>
  <div class="box">
    <el-card>
      <div class="title">{{ sid }}</div>
      <div class="content">
        <p :class="item.clazz" v-for="(item, index) in messages" :key="index">
          <el-avatar size="small"/>
          {{ item.text }}
        </p>
      </div>

      <div class="bottom">
        <el-input v-model="sendText"/>
        <el-button type="primary" @click="sendHandler">发送</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "websocket",
  props: {
    /*sid: {
      type: String
    },*/
    socket: {
      type: WebSocket
    }
  },
  data() {
    return {
      reqUrl: `http://localhost:8080/springboot3634x/websocket/${this.$storage.get("adminName")}`,
      sendText: '',
      messages: [],
      sid: null
    }
  },
  computed: {
    stateMsg() {
      return this.$store.state.websocket.msg
    }
  },
  watch: {
    stateMsg: {
      handler(newVal, oldVal) {
        this.messages = newVal.filter(item => item.sid === this.sid)
      },
      immediate: true
    },
  },
  mounted() {
    this.$bus.$on('clearMessages', (sid) => {
      this.sid = sid
      this.messages = this.$store.getters['websocket/getMsg'](sid)
    })
    this.init()
  },
  methods: {
    init() {
      let msg = this.$store.getters['websocket/getMsg'](this.sid)
    },
    /*init() {
      if (typeof WebSocket == "undefined") {
        this.$message("您的浏览器不支持在线聊天")
      } else {
        console.log('====>', this.reqUrl);
        this.socket = new WebSocket(this.reqUrl.replace("http", "ws"));
        this.socket.onopen = () => {
          this.$message({
            showClose: true,
            message: 'Socket 已打开',
            type: 'success'
          })
        };
        this.socket.onmessage = (msg) => {
          this.messages.push({
            clazz: 'left',
            text: msg.data
          })
        };
        this.socket.onclose = () => {
          this.$message({
            showClose: true,
            message: 'Socket已关闭',
            type: 'warning'
          })
        };
        this.socket.onerror = () => {
          this.$message({
            showClose: true,
            message: 'Socket发生了错误',
            type: 'error'
          })
        };
      }
    },*/
    sendHandler() {
      if (this.sendText === '') {
        return
      }

      this.socket.send(`{"sid":"${this.sid}","message":"${this.sendText}"}`)

      this.$store.commit('websocket/addMsg', {sid: this.sid, text: this.sendText, clazz: 'right'})

      this.sendText = ''
    }
  }
}
</script>

<style scoped lang="scss">
.box {
  height: 100%;
  width: 100%;

  .el-card {
    margin: auto;
    height: 94%;
    width: 96%;

    .title {
      text-align: center;
      font-size: 24px;
    }

    .content {
      height: 56vh;
      overflow: auto;

      .left {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }

      .right {
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        margin-bottom: 10px;
      }
    }


    .bottom {
      display: flex;
      margin-top: 20px;

      //width: 60%;
      .el-input {
        width: 90%;
        margin-right: 10px;
      }
    }
  }
}

</style>